<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学院专业选择</title>
    <style>
        #res { 
			color: red;
		}
    </style>
</head>
<body onload="init()">
    学院：
    <select id="name" onchange="changeCollege()"></select>
    专业：
    <select id="major" onchange="updateResult()"></select>
    <br>
    <span id="res">请选择学院和专业</span>

    <script type="text/javascript">
        let names = []; // 存储所有学院数据
        let nameSelect = document.getElementById("name"); // 学院下拉列表
        let majorSelect = document.getElementById("major"); // 专业下拉列表
        let resultSpan = document.getElementById("res"); // 结果显示区域

        function init() {
            // 创建AJAX请求
            let xhr = new XMLHttpRequest();
            xhr.open("GET", "college.json", false); // 同步请求（注意：现代实践推荐使用异步）
            
            // 处理AJAX响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = xhr.responseText;
                    names = JSON.parse(data);
                    
                    // 加载学院下拉列表
                    for (let i = 0; i < names.length; i++) {
                        let option = new Option(names[i].name, i);
                        nameSelect.options[i] = option;
                    }
                    
                    // 加载第一个学院的专业
                    loadMajors(0);
                    
                    // 初始化结果显示
                    updateResult();
                }
            };
            
            // 发送请求
            xhr.send();
        }

        // 学院变更时更新专业列表
        function changeCollege() {
            let selectedIndex = nameSelect.selectedIndex;
            loadMajors(selectedIndex);
            updateResult();
        }

        // 加载指定学院的专业
        function loadMajors(collegeIndex) {
            majorSelect.innerHTML = ''; // 清空现有选项
            
            let majors = names[collegeIndex].major;
            for (let i = 0; i < majors.length; i++) {
                let option = new Option(majors[i], i);
                majorSelect.options[i] = option;
            }
        }

        // 更新结果显示
        function updateResult() {
            let collegeIndex = nameSelect.selectedIndex;
            let majorIndex = majorSelect.selectedIndex;
            
            if (collegeIndex === -1 || majorIndex === -1) {
                resultSpan.innerHTML = "请选择学院和专业";
                return;
            }
            
            let collegeName = nameSelect.options[collegeIndex].text;
            let majorName = majorSelect.options[majorIndex].text;
            
            resultSpan.innerHTML = `你所选的专业是：${collegeName} - ${majorName}`;
        }
    </script>
</body>
</html>